<template>
	<view class="bod">
		<!-- //用户 -->
		<view class="user" style="width: 100%;position: relative;">
			<view class="yx">
				<view class="yxs_user">
					<image style="flex: 1;" src="../../static/newimg/user.png" mode="widthFix"></image>
					<view class="names">
						<p style='flex: 3;font-size: 38rpx;'>{{$store.state.username}}</p>
						<p style='flex: 2;font-size: 30rpx;'>{{$store.state.orgname}}</p>
					</view>
				</view>
				<view class="bn">
					<image src="../../static/newimg/shouyeNewImg/icon-ybjkd@3x.svg" mode="widthFix"></image>
					<p>发票抬头</p>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="functions">
			<ul>
				<li  v-for="(r, index) in funlist" :key="index" @click='ngto(r.name)'>
					<image style="width: 40rpx;" :src="r.image" mode="widthFix"></image>
					<p>{{ r.title }}</p>
					<image style="width: 30rpx;" src="/static/newimg/blackjt.png" mode="widthFix"></image>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			funlist: [
				{ image: '/static/newimg/mySvg/xttz.svg', title: '系统通知', name: 'm' },
				{ image: '/static/newimg/mySvg/clbz.svg', title: '差旅标准', name: 'v' },
				{ image: '/static/newimg/mySvg/ysaq.svg', title: '隐私安全', name: 'n' },
				{ image: '/static/newimg/mySvg/wT.svg', title: '问题答疑', name: 'c' },
				{ image: '/static/newimg/mySvg/yjfk.svg', title: '建议反馈', name: 's' },
				{ image: '/static/newimg/mySvg/czsc.svg', title: '操作手册', name: 'a' },
				{ image: '/static/newimg/mySvg/dlsz.svg', title: '代理设置', name: 'd' },
				{ image: '/static/newimg/mySvg/xgmm.svg', title: '修改密码', name: 'd' },
				{ image: '/static/newimg/mySvg/pf.svg', title: '皮肤切换', name: 'd' },
			]
		}
	},
	methods: {
		ngto(name) {
			console.log(name)
			switch (name) {
				case 'm':
					console.log('是m啊，666')
					break;
				case 'v':
					console.log('是v啊，666')
					break;
				case 'n':
					console.log('是n啊，666')
					break;
				case 'c':
					console.log('是c啊，666')
					break;
				case 'a':
					console.log('是a啊，666')
					break;
			}
			
		}
	}
}
</script>

<style lang="scss" scoped>
view{
		font-family: pf
}
.bod {
	height: auto;
	background-color: rgb(248, 249, 251);
}

.user {
	width: 100%;
	height: 500rpx;
	background: url(../../static/newimg/proveImg16232193210001.png) no-repeat 0 0;
	background-size: contain;

	.yx {
		width: 90%;
		margin: 0 auto;
		// background-color: red;
		padding-top: 110rpx;

		image {
			width: 20%;
		}

		.yxs_user {
			display: flex;
			flex-direction: row;
		}

		.names {
			flex: 4;
			display: flex;
			flex-direction: column;
			margin-left: 50rpx;
			p{
				color: white;
			}
		}

		.bn {
			margin-top: 80rpx;
			width: 100%;
			height: 120rpx;
			background-color: white;
			border-radius: 8px;
			box-sizing: border-box;
			padding-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: 6rpx 6px 5px rgba(153, 153, 153, .1);

			image {
				width: 50rpx;
			}

			p {
				font-size: 34rpx;
				margin-left: 30rpx;
			}
		}
	}
}

.functions {
	ul {
		list-style: none;
		li {
			// background: url(../../static/newimg/blackjt.png) no-repeat 0 0 ;
			// background-size: 30rpx;
			background-color: white;
			margin: 10rpx 0;
			padding-left: 30rpx;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			p {
				display: inline-block;
				font-size: 30rpx;
				padding-left: 30rpx;
				width: 570rpx;
			}
		}
	}
}
</style>
